<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="dist/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="main" style="width: 600px;height: 400px;">
    </div>
    <script>


        var main = new Vue({
            el: '#main',
            data: {
                timer : '',
            },
            created: function () {
                this.init()
            },
            beforeDestory: function () {
                cleanInterval(this.timer);
            },
            methods: {
                init: function () {
                    this.freshGraph();
                    this.timer = setInterval(() => {
                        this.freshGraph();
                    }, 1000);
                },
                freshGraph: function () {

                    //document.getElementById('main').contentWindow.location.reload(true);
                },
            }
        });

        // 放到上面就加载不出来
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: ['MonDx', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        option && myChart.setOption(option);


    </script>

</body>
</html>